<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/index.css">
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!--    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>-->
</head>

<body>
<div id="app">
    <a style="position: absolute;z-index: 10; left: 10px;top:10px" href="/echarts/lj/index.html"><img
            src="./images/home.png" width="25" alt="" srcset=""></a>
    <div class="container">
        <div class="header" style="padding: 0">{{ name }}</div>
        <div class="main">
            <div class="left">
                <div class="common-line flex-3">
                    <div class="comon-header">危险源类型占比</div>
                    <div class="chart">
                        <div id="echarts_11" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header">各乡镇加油站分布</div>
                    <div class="chart">
                        <div id="echarts_0" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-3">
                    <div class="comon-header">危化品危害等级分析</div>
                    <div class="chart">
                        <div id="echarts_1" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>

            </div>
            <div class="content flex direction">
                <div class="common-line" style="position: absolute; top: 0; left: 0; flex-direction: initial; align-items: center; padding: 20px; font-size: 15px">
                    <span>危化品企业：9家</span><span style="margin-left: 30px">烟花爆竹企业：1家</span><span style="margin-left: 30px">加油站：24家</span>
                </div>
                <div class="flex-8" style="position: relative;">
                    <div class="map" id="map" style="width: 100%;height: 100%;"></div>
                    <ul class="map-legend"></ul>
                </div>
                <div class="common-line flex-2">
                    <div class="comon-header" style=" padding-top: 1%;">应急隐患数量构成</div>
                    <div class="chart">
                        <div id="echarts_3" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="common-line flex-3">
                    <div class="comon-header">乡镇隐患点数量排名</div>
                    <div class="chart">
                        <div id="echarts_2" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header">各乡镇烟花爆竹分布</div>
                    <div class="chart">
                        <div id="echarts_4" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-3">
                    <div class="comon-header ">危化品危险类型</div>
                    <div class="chart">
                        <div id="echarts_5" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 <script type="text/javascript" src="./js/echarts.min1.js"></script>
<!--<script type="text/javascript" src="/echarts/js/echarts.min.js"></script>-->
<script type="text/javascript" src="/echarts/js/const.js"></script>
<script src="./js/luojiang.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
